<template>
  <div>
    <div class="table-tool">
      <el-button class="el-button--blue" type="primary" icon="el-icon-upload" @click="exportPhysical">导出</el-button>
    </div>
    <el-table ref="table_container" header-align="center" :data="data" stripe :height="tableHeight" v-loading="loading" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
      <el-table-column prop="schoolRollId" label="学籍号" width="200px" fixed/>
      <el-table-column prop="name" label="姓名" width="150px"/>
      <el-table-column prop="sex" label="性别" width="150px"/>
      <el-table-column prop="grade" label="年级" width="150px"/>
      <el-table-column prop="class" label="班级" width="150px"/>
      <el-table-column prop="school" label="学校名称" width="200px"/>
      <el-table-column prop="measureDate" label="测量日期" width="150px"/>
      <el-table-column prop="isExemption" label="是否免测" width="150px"/>
      <el-table-column prop="missingTestNum" label="缺失数据条数" width="150px"/>
      <el-table-column prop="physicalTotalScore" label="综合成绩" width="150px"/>
      <el-table-column prop="physicalBasicScore" label="基础成绩" width="150px"/>
      <el-table-column prop="physicalExtraScore" label="额外成绩" width="150px"/>
      <el-table-column prop="physicalLevel" label="体质评价" width="150px"/>
      <el-table-column prop="height" label="身高" width="150px"/>
      <el-table-column prop="weight" label="体重" width="150px"/>
      <el-table-column prop="bodyMassIndex" label="体重指数" width="150px"/>
      <el-table-column prop="bodyMassIndexBasicScore" label="体重指数基础成绩" width="150px"/>
      <el-table-column prop="bodyMassIndexExtraScore" label="体重指数额外成绩" width="150px"/>
      <el-table-column prop="bodyMassIndexTotalScore" label="体重指数综合成绩" width="150px"/>
      <el-table-column prop="bodyMassIndexLevel" label="体重指数评价" width="150px"/>
      <el-table-column prop="vitalCapacity" label="肺活量" width="150px"/>
      <el-table-column prop="vitalCapacityBasicScore" label="肺活量基础成绩" width="150px"/>
      <el-table-column prop="vitalCapacityExtraScore" label="肺活量额外成绩" width="150px"/>
      <el-table-column prop="vitalCapacityTotalScore" label="肺活量综合成绩" width="150px"/>
      <el-table-column prop="vitalCapacityLevel" label="肺活量评价" width="150px"/>
      <el-table-column prop="fiftyMeters" label="50米跑" width="150px"/>
      <el-table-column prop="fiftyMetersBasicScore" label="50米跑基础成绩" width="150px"/>
      <el-table-column prop="fiftyMetersExtraScore" label="50米跑额外成绩" width="150px"/>
      <el-table-column prop="fiftyMetersTotalScore" label="50米跑综合成绩" width="150px"/>
      <el-table-column prop="fiftyMetersLevel" label="50米跑评价" width="150px"/>
      <el-table-column prop="sitAndReach" label="坐位体前屈" width="150px"/>
      <el-table-column prop="sitAndReachBasicScore" label="坐位体前屈基础成绩" width="150px"/>
      <el-table-column prop="sitAndReachExtraScore" label="坐位体前屈额外成绩" width="150px"/>
      <el-table-column prop="sitAndReachTotalScore" label="坐位体前屈综合成绩" width="150px"/>
      <el-table-column prop="sitAndReachLevel" label="坐位体前屈评价" width="150px"/>
      <el-table-column prop="oneMinuteRopeSkipping" label="一分钟跳绳" width="150px"/>
      <el-table-column prop="oneMinuteRopeSkippingBasicScore" label="一分钟跳绳基础成绩" width="150px"/>
      <el-table-column prop="oneMinuteRopeSkippingExtraScore" label="一分钟跳绳额外成绩" width="150px"/>
      <el-table-column prop="oneMinuteRopeSkippingTotalScore" label="一分钟跳绳综合成绩" width="150px"/>
      <el-table-column prop="oneMinuteRopeSkippingLevel" label="一分钟跳绳评价" width="150px"/>
      <el-table-column prop="oneMinuteSitUps" label="一分钟仰卧起坐" width="150px"/>
      <el-table-column prop="oneMinuteSitUpsBasicScore" label="一分钟仰卧起坐基础成绩" width="150px"/>
      <el-table-column prop="oneMinuteSitUpsExtraScore" label="一分钟仰卧起坐额外成绩" width="150px"/>
      <el-table-column prop="oneMinuteSitUpsTotalScore" label="一分钟仰卧起坐综合成绩" width="150px"/>
      <el-table-column prop="oneMinuteSitUpsLevel" label="一分钟仰卧起坐评价" width="150px"/>
      <el-table-column prop="shuttleRun" label="50米×8往返跑" width="150px"/>
      <el-table-column prop="shuttleRunBasicScore" label="50米×8往返跑基础成绩" width="150px"/>
      <el-table-column prop="shuttleRunExtraScore" label="50米×8往返跑额外成绩" width="150px"/>
      <el-table-column prop="shuttleRunTotalScore" label="50米×8往返跑综合成绩" width="150px"/>
      <el-table-column prop="shuttleRunLevel" label="50米×8往返跑评价" width="150px"/>
      <el-table-column prop="standingLongJump" label="立定跳远" width="150px"/>
      <el-table-column prop="standingLongJumpBasicScore" label="立定跳远基础成绩" width="150px"/>
      <el-table-column prop="standingLongJumpExtraScore" label="立定跳远额外成绩" width="150px"/>
      <el-table-column prop="standingLongJumpTotalScore" label="立定跳远综合成绩" width="150px"/>
      <el-table-column prop="standingLongJumpLevel" label="立定跳远评价" width="150px"/>
      <el-table-column prop="chinning" label="引体向上" width="150px"/>
      <el-table-column prop="chinningBasicScore" label="引体向上基础成绩" width="150px"/>
      <el-table-column prop="chinningExtraScore" label="引体向上额外成绩" width="150px"/>
      <el-table-column prop="chinningTotalScore" label="引体向上综合成绩" width="150px"/>
      <el-table-column prop="chinningLevel" label="引体向上评价" width="150px"/>
      <el-table-column prop="oneThousandMeters" label="1000米跑" width="150px"/>
      <el-table-column prop="oneThousandMetersBasicScore" label="1000米跑基础成绩" width="150px"/>
      <el-table-column prop="oneThousandMetersExtraScore" label="1000米跑额外成绩" width="150px"/>
      <el-table-column prop="oneThousandMetersTotalScore" label="1000米跑综合成绩" width="150px"/>
      <el-table-column prop="oneThousandMetersLevel" label="1000米跑评价" width="150px"/>
      <el-table-column prop="eightHundredMeters" label="800米跑" width="150px"/>
      <el-table-column prop="eightHundredMetersBasicScore" label="800米跑跑基础成绩" width="150px"/>
      <el-table-column prop="eightHundredMetersExtraScore" label="800米跑跑额外成绩" width="150px"/>
      <el-table-column prop="eightHundredMetersTotalScore" label="800米跑跑综合成绩" width="150px"/>
      <el-table-column prop="eightHundredMetersLevel" label="800米跑评价" width="150px"/>
      <el-table-column prop="bodyFat" label="体脂" width="150px"/>
      <el-table-column prop="bodyFatLevel" label="体脂评价" width="150px"/>
      <el-table-column prop="grip" label="握力" width="150px"/>
      <el-table-column prop="gripLevel" label="握力评价" width="150px"/>
      <el-table-column prop="responseCapability" label="反应能力" width="150px"/>
      <el-table-column prop="responseCapabilityLevel" label="反应能力评价" width="150px"/>
      <el-table-column prop="balanceAbility" label="平衡能力" width="150px"/>
      <el-table-column prop="balanceAbilityLevel" label="平衡能力评价" width="150px"/>
      <el-table-column prop="verticalJump" label="纵跳" width="150px"/>
      <el-table-column prop="verticalJumpLevel" label="纵跳评价" width="150px"/>
      <el-table-column align="center" label="操作" width="230px" fixed="right">
        <template slot-scope="scope">
          <el-button class="text-button" type="text" icon="el-icon-edit blue"  @click="changeInfoDialogShow(scope.$index)">修改信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="changeDialog.title" :visible.sync="changeDialog.visible" width="1200px">
      <physical-change v-model="changeDialog"/>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GetPhysicalTable, GetPhysicalExport } from '../../../api/table'
import { ParseChinese } from '../../../utils/date'
import physicalChange from '../dialog/physical-change'
export default {
  name: 'management',
  components: {
    physicalChange
  },
  data () {
    return {
      tableHeight: '0px',
      pagination: {
        pageSize: 10,
        currentPage: 1
      },
      total: 0,
      data: [],
      loading: false,
      changeDialog: {
        title: '',
        visible: false,
        data: {
          id: '',
          school: '',
          missingTestNum: '',
          schoolRollId: '',
          name: '',
          gradeYear: '',
          grade: '',
          class: '',
          measureDate: '',
          isExemption: '',
          physicalTotalScore: '',
          height: '',
          weight: '',
          bodyMassIndex: '',
          vitalCapacity: '',
          isVitalCapacity: true,
          fiftyMeters: '',
          isFiftyMeters: true,
          sitAndReach: '',
          isSitAndReach: true,
          oneMinuteRopeSkipping: '',
          isOneMinuteRopeSkipping: true,
          oneMinuteSitUps: '',
          isOneMinuteSitUps: true,
          shuttleRun: '',
          isShuttleRun: true,
          standingLongJump: '',
          isStandingLongJump: true,
          chinning: '',
          isChinning: true,
          oneThousandMeters: '',
          isOneThousandMeters: true,
          eightHundredMeters: '',
          isEightHundredMeters: true,
          bodyFat: '',
          isBodyFat: true,
          grip: '',
          isGrip: true,
          responseCapability: '',
          isResponseCapability: true,
          balanceAbility: '',
          isBalanceAbility: true,
          verticalJump: '',
          isVerticalJump: true
        }
      }
    }
  },
  mounted () {
    setTimeout(this.reInitTableHeight, 100)
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    flashTable () {
      this.loading = true
      GetPhysicalTable(this.pagination.pageSize, this.pagination.currentPage).then((res) => {
        this.loading = false
        this.total = res.data.total
        this.data = res.data.data
      })
    },
    changeInfoDialogShow (index) {
      this.changeDialog.data.id = this.data[index].id
      this.changeDialog.data.school = this.data[index].school
      this.changeDialog.data.missingTestNum = this.data[index].missingTestNum
      this.changeDialog.data.schoolRollId = this.data[index].schoolRollId
      this.changeDialog.data.name = this.data[index].name
      this.changeDialog.data.gradeYear = Number(this.data[index].grade.substring(0, this.data[index].grade.indexOf('级')))
      if (this.data[index].grade.indexOf('一年级') !== -1) {
        this.changeDialog.data.grade = 11
      } else if (this.data[index].grade.indexOf('二年级') !== -1) {
        this.changeDialog.data.grade = 12
      } else if (this.data[index].grade.indexOf('三年级') !== -1) {
        this.changeDialog.data.grade = 13
      } else if (this.data[index].grade.indexOf('四年级') !== -1) {
        this.changeDialog.data.grade = 14
      } else if (this.data[index].grade.indexOf('五年级') !== -1) {
        this.changeDialog.data.grade = 15
      } else if (this.data[index].grade.indexOf('六年级') !== -1) {
        this.changeDialog.data.grade = 16
      } else if (this.data[index].grade.indexOf('初一') !== -1) {
        this.changeDialog.data.grade = 21
      } else if (this.data[index].grade.indexOf('初二') !== -1) {
        this.changeDialog.data.grade = 22
      } else if (this.data[index].grade.indexOf('初三') !== -1) {
        this.changeDialog.data.grade = 23
      } else if (this.data[index].grade.indexOf('高一') !== -1) {
        this.changeDialog.data.grade = 31
      } else if (this.data[index].grade.indexOf('高二') !== -1) {
        this.changeDialog.data.grade = 32
      } else if (this.data[index].grade.indexOf('高三') !== -1) {
        this.changeDialog.data.grade = 33
      }
      this.changeDialog.data.class = Number(this.data[index].class)
      this.changeDialog.data.measureDate = ParseChinese(this.data[index].measureDate)
      this.changeDialog.data.isExemption = this.data[index].isExemption
      this.changeDialog.data.physicalTotalScore = this.data[index].physicalTotalScore
      this.changeDialog.data.height = this.data[index].height
      this.changeDialog.data.weight = this.data[index].weight
      this.changeDialog.data.bodyMassIndex = this.data[index].bodyMassIndex
      this.changeDialog.data.vitalCapacity = this.data[index].vitalCapacity
      if (this.data[index].vitalCapacityLevel === '') {
        this.changeDialog.data.isVitalCapacity = false
      } else {
        this.changeDialog.data.isVitalCapacity = true
      }
      this.changeDialog.data.fiftyMeters = this.data[index].fiftyMeters
      if (this.data[index].fiftyMetersLevel === '') {
        this.changeDialog.data.isFiftyMeters = false
      } else {
        this.changeDialog.data.isFiftyMeters = true
      }
      this.changeDialog.data.sitAndReach = this.data[index].sitAndReach
      if (this.data[index].sitAndReachLevel === '') {
        this.changeDialog.data.isSitAndReach = false
      } else {
        this.changeDialog.data.isSitAndReach = true
      }
      this.changeDialog.data.oneMinuteRopeSkipping = this.data[index].oneMinuteRopeSkipping
      if (this.data[index].oneMinuteRopeSkippingLevel === '') {
        this.changeDialog.data.isOneMinuteRopeSkipping = false
      } else {
        this.changeDialog.data.isOneMinuteRopeSkipping = true
      }
      this.changeDialog.data.oneMinuteSitUps = this.data[index].oneMinuteSitUps
      if (this.data[index].oneMinuteSitUpsLevel === '') {
        this.changeDialog.data.isOneMinuteSitUps = false
      } else {
        this.changeDialog.data.isOneMinuteSitUps = true
      }
      this.changeDialog.data.shuttleRun = this.data[index].shuttleRun
      if (this.data[index].shuttleRunLevel === '') {
        this.changeDialog.data.isShuttleRun = false
      } else {
        this.changeDialog.data.isShuttleRun = true
      }
      this.changeDialog.data.standingLongJump = this.data[index].standingLongJump
      if (this.data[index].standingLongJumpLevel === '') {
        this.changeDialog.data.isStandingLongJump = false
      } else {
        this.changeDialog.data.isStandingLongJump = true
      }
      this.changeDialog.data.chinning = this.data[index].chinning
      if (this.data[index].chinningLevel === '') {
        this.changeDialog.data.isChinning = false
      } else {
        this.changeDialog.data.isChinning = true
      }
      this.changeDialog.data.oneThousandMeters = this.data[index].oneThousandMeters
      if (this.data[index].oneThousandMetersLevel === '') {
        this.changeDialog.data.isOneThousandMeters = false
      } else {
        this.changeDialog.data.isOneThousandMeters = true
      }
      this.changeDialog.data.eightHundredMeters = this.data[index].eightHundredMeters
      if (this.data[index].eightHundredMetersLevel === '') {
        this.changeDialog.data.isEightHundredMeters = false
      } else {
        this.changeDialog.data.isEightHundredMeters = true
      }
      this.changeDialog.data.bodyFat = this.data[index].bodyFat
      if (this.data[index].bodyFatLevel === '') {
        this.changeDialog.data.isBodyFat = false
      } else {
        this.changeDialog.data.isBodyFat = true
      }
      this.changeDialog.data.grip = this.data[index].grip
      if (this.data[index].gripLevel === '') {
        this.changeDialog.data.isGrip = false
      } else {
        this.changeDialog.data.isGrip = true
      }
      this.changeDialog.data.responseCapability = this.data[index].responseCapability
      if (this.data[index].responseCapabilityLevel === '') {
        this.changeDialog.data.isResponseCapability = false
      } else {
        this.changeDialog.data.isResponseCapability = true
      }
      this.changeDialog.data.balanceAbility = this.data[index].balanceAbility
      if (this.data[index].balanceAbilityLevel === '') {
        this.changeDialog.data.isBalanceAbility = false
      } else {
        this.changeDialog.data.isBalanceAbility = true
      }
      this.changeDialog.data.verticalJump = this.data[index].verticalJump
      if (this.data[index].verticalJumpLevel === '') {
        this.changeDialog.data.isVerticalJump = false
      } else {
        this.changeDialog.data.isVerticalJump = true
      }
      this.changeDialog.visible = true
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    },
    exportPhysical () {
      GetPhysicalExport()
    }
  },
  computed: {
    ...mapGetters([
      'height',
      'provinceId',
      'cityId',
      'areaId',
      'joinYear',
      'schoolName',
      'schoolId',
      'schoolRollId',
      'flash'
    ])
  },
  watch: {
    height: function (val) {
      this.$nextTick(this.$nextTick(this.reInitTableHeight))
    },
    'pagination.currentPage': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    'pagination.pageSize': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    provinceId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    cityId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    joinYear: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    areaId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolName: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolRollId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    flash: function () {
      this.flashTable()
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .table-tool {
    width: 100%;
    padding: 15px 10px;
  }
</style>
